<template>
  <div class="yypz">
    <Card>
      <div slot="cRight" style="margin-right: 20px">
        <el-button
          type="primary"
          size="mini"
          @click="dialogVisible = true"
          style="margin-right: 20px"
        >
          新增服务
        </el-button>
      </div>
      <div slot="cRight">
        <el-input placeholder="搜索服务" size="small"></el-input>
      </div>
      <section>
        <Table :tableData="tableData"></Table>
        <Pagination :total="tableData.row.length"></Pagination>
      </section>
    </Card>

    <el-dialog
      close="dialog"
      title="新增服务"
      :visible.sync="dialogVisible"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <Xzpz />
      </el-scrollbar>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogVisible = false
            addTableData()
            $message({
              message: '保存成功',
              type: 'success'
            })
          "
        >
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
import Pagination from '@/components/Pagination'
import Xzpz from './components/Xzpz'
export default {
  components: {
    Table,
    Card,
    Pagination,
    Xzpz
  },

  data() {
    return {
      dialogVisible: false,
      allPush: false,
      tableData: {
        col: [
          {
            prop: 'colA',
            label: '序号'
          },
          {
            prop: 'colB',
            label: '名称'
          },
          {
            prop: 'colC',
            label: '集群名称'
          },
          {
            prop: 'colD',
            label: '所属分区'
          },
          {
            prop: 'colE',
            label: '操作',
            type: 'Button',
            width: '300px',
            btnList: [{ label: '修改' }, { label: '克隆' }, { label: '删除' }]
          }
        ],
        row: [
          {
            colA: '3689',
            colB: 'abs-server-api',
            colC: 'server-api',
            colD: 'bboss-api'
          },
          {
            colA: '3789',
            colB: 'bboss-product-api',
            colC: 'product-api',
            colD: 'bboss-api'
          },
          {
            colA: '4201',
            colB: 'bboss-server-config',
            colC: 'server-api',
            colD: 'bboss-api'
          }
        ]
      }
    }
  },

  methods: {
    addTableData() {
      if (this.allPush) {
        this.tableData.row.push({
          colA: '4359',
          colB: 'buddy-server-web',
          colC: 'buddy-server',
          colD: 'bboss-api'
        })
      } else {
        this.allPush = true
        this.tableData.row.push({
          colA: '4358',
          colB: 'statge-server-web',
          colC: 'statge-server',
          colD: 'bboss-api'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body {
  height: 62vh;
}
</style>
